<template>
  <el-form class="demo-form-inline" label-width="120px" size="middle">
    <el-form-item label="新密码">
      <el-input v-model="newPassword" type="password" placeholder="请输入新密码"></el-input>
    </el-form-item>
    <el-form-item label="确认新密码">
      <el-input v-model="confirmNewPassword" type="password" placeholder="请确认新密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {ref, getCurrentInstance} from 'vue'
import {resetPassword} from '@/api/system/account/index.js'

import {ElMessage} from "element-plus"



export default {
  name: "mine-reset-password",
  props: {
    userId: {
      required: true,
      type: String,
      default: ''
    }
  },
  setup(props) {
    const {proxy} = getCurrentInstance()
    const newPassword = ref('')
    const confirmNewPassword = ref('')
    const onSubmit = () => {
      if (newPassword.value !== confirmNewPassword.value) {
        ElMessage({
          message: '两次输入的账号不相同',
          type: 'warning',
        })
      }
      resetPassword({id: props.userId, password: newPassword.value})
          .then(res => {
            if (res.success) {
              ElMessage({
                message: res.msg,
                type: 'success',
              })
              proxy.$bus.emit('cancelAccountDialog')
            } else {
              ElMessage({
                message: res.msg,
                type: 'warning',
              })
            }
          })
    }
    const onCancel = () => {
      proxy.$bus.emit('cancelAccountDialog')
    }

    return {
      newPassword,
      confirmNewPassword,
      onSubmit,
      onCancel
    }
  }
}
</script>

<style scoped>

</style>
